<template>
  <div>
    <div>
      <el-form :inline="true" :model="searchFormContent">
        <el-form-item>
          <el-popconfirm title="这是确定批量删除吗？" @confirm="deleteMany()">
            <el-button style="margin-right: 20px" icon="el-icon-delete" size="small" type="danger" slot="reference"
              :disabled="delBtlStatus">批量删除
            </el-button>
          </el-popconfirm>
        </el-form-item>
        <el-form-item label="活动名称">
          <el-select size="small" v-model="searchFormContent.activityName" placeholder="请选择活动名称"
            @change="change($event)">
            <el-option v-for="item in getsearformActivityInfo" :key="item.activityName" :label="item.activityName"
              :value="`${item.activityName}|${item.activitiesId}|${item.beSampleUnitsId}`">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地点名称">
          <el-select size="small" v-model="searchFormContent.addressId" placeholder="请选择地点名称">
            <el-option v-for="item in getsearformAddressName" :key="item.addressId" :label="item.addressName"
              :value="item.addressId">
              {{ item.addressName }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="Search">查询</el-button>
          <el-button type="success" size="small" @click="cancelSearch">取消查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table @selection-change="handleSelectionChange" :data="tableData" border>
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="序号" align="center" type="index" :index="indexAdd" width="60">
        </el-table-column>
        <el-table-column prop="tblActivities.activityName" align="center" label="活动名称" width="180">
        </el-table-column>
        <el-table-column prop="tblSampleAddress.addressName" align="center" label="地点名称" width="280">
        </el-table-column>
        <el-table-column prop="addressNumber" align="center" label="窗口号" width="150">
        </el-table-column>
        <el-table-column prop="icon" label="操作" width="450" align="center">
          <template slot-scope="scope">
            <template>
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.activitiesAddressId)">
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="limitPage">
      <el-pagination style="margin-top: 16px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.currentPage" :page-sizes="pageSizes" :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysWindowManager",
  data() {
    return {
      multipleSelection: [],
      searchFormContent: {
        activityName: '',
        activitiesId: '',
        addressId: '',
      },
      getsearformActivityInfo: [],
      getsearformAddressName: [],
      splitInfo: [],
      tableData: [],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [4, 6, 8],
      page: {
        // 默认显示第几页
        currentPage: 1,
        // 默认每页显示的条数（可修改）
        pageSize: 6
      },
      delBtlStatus: true,
      zore: 0,
      //标记分页接口
      flag: '',
      beSampleUnitsId: JSON.parse(localStorage.getItem("userInfo")).unitsId
    }
  },
  created() {
    this.initWindowInfo();
    this.getHeldEndActivity();
  },
  methods: {
    change(e) {
      console.log(e)
      this.splitInfo = e.split('|')
      this.searchFormContent.activityName = this.splitInfo[0]
      this.searchFormContent.activitiesId = this.splitInfo[1]
      this.getAddressName(this.splitInfo[2])
    },
    // 实现表格序号自增
    indexAdd(index) {
      return index + 1 + (this.page.currentPage - 1) * this.page.pageSize;
    },
    //获取所有窗口号
    initWindowInfo() {
      this.$axios.post("/gmu/tbl-activities-address/getAllWindows/" + this.beSampleUnitsId, this.page).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.tblActivitiesAddresses;
          this.totalCount = res.data.data.total;
          this.flag = 'one'
        }
      })
    },
    //获取所有举行中及结束的活动
    getHeldEndActivity() {
      this.$axios.get("/gmu/tbl-activities/getAllActivitiesNotByStatus/" + this.beSampleUnitsId).then(res => {
        if (res.data.code === 200) {
          this.getsearformActivityInfo = res.data.data
          console.log(this.getsearformActivityInfo)
        }
      })
    },
    //通过采样id获取采样地点
    getAddressName(beSampleUnitsId) {
      this.$axios.get("/gmu/tbl-sample-address/getSampleAddressByUnitsId/" + beSampleUnitsId).then(res => {
        if (res.data.code === 200) {
          this.getsearformAddressName = res.data.data
        }
      })
    },
    //查询 由活动id和采样地点id获取窗口号(分页)
    Search() {
      // if (this.searchFormContent.addressId === '') {
      //   this.searchFormContent.addressId = 0
      // }
      this.$axios.post("/gmu/tbl-activities-address/getAllWindowsByIds/" + this.searchFormContent.activitiesId + "/" + ((this.searchFormContent.addressId !== '') ? (this.searchFormContent.addressId) : this.zore), this.page).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.tblActivitiesAddresses;
          this.totalCount = res.data.data.total;
          this.flag = 'two'

        }
      })
    },
    //取消查询
    cancelSearch() {
      this.initWindowInfo();
      this.searchFormContent.activityName = ''
      this.searchFormContent.activitiesId = ''
      this.searchFormContent.addressId = ''
    },
    deleteMany() {
      let activitiesAddressIds = [];
      this.multipleSelection.forEach(item => {
        activitiesAddressIds.push(item.activitiesAddressId)
      })
      this.$axios.delete("/gmu/tbl-activities-address/deleteWindowsByIds/" + activitiesAddressIds).then(res => {
        if (res.data.code === 200) {
          this.initWindowInfo();
        }
      })

    },
    //分页
    handleCurrentChange(val) {
      console.log(val)
      // 改变默认的页数
      this.page.currentPage = val;
      // 切换页码时，要获取每页显示的条数
      if (this.flag == 'one') {
        this.initWindowInfo();
      } else if (this.flag == 'two') {
        this.Search()
      }
    },
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.page.pageSize = val;
      // 点击每页显示的条数时，显示第一页
      if (this.flag == 'one') {
        this.initWindowInfo();
      } else if (this.flag == 'two') {
        this.Search()
      }
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.page.currentPage = 1;
    },
    //删除信息
    delHandle(activitiesAddressId) {
      this.$axios.delete("/gmu/tbl-activities-address/" + activitiesAddressId).then(res => {
        if (res.data.code == 200) {
          this.initWindowInfo()
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.delBtlStatus = val.length == 0;
    }
  }
}
</script>

<style scoped>
</style>
